<template>
  <uni-popup ref="popup" type="bottom">
    <view class="bgWite">
      <view class="title flex flex-align flex-center">优惠明细</view>
      <view class="colse" @click="close">
        <uni-icons type="closeempty" size="20"></uni-icons>
      </view>
      <view class="coupon">
        <view class="list" v-for="(item,index) in selectedCoupons" :key="index">
          <view >
            <view class="titles">优惠券</view>
            <view class="quanList flex flex-align flex-bt">
              <view>{{item.name}}</view>
              <view class="red">减¥{{item.amount_to_cash}}</view>
            </view>
            
          </view>
          <!-- <view>
            <view class="titles">积分抵扣</view>
            <view class="quanList flex flex-align flex-bt">
              <view>使用1000积分抵扣</view>
              <view class="red">减¥10.00</view>
            </view>
          </view>
          <view>
            <view class="titles">红包券抵扣</view>
            <view class="quanList flex flex-align flex-bt">
              <view>使用1000红包券抵扣</view>
              <view class="red">减¥5.00</view>
            </view>
          </view> -->
        </view>
        
      </view>
    </view>
  </uni-popup>
</template>



<script setup lang="ts">
import { onMounted, ref } from 'vue'

defineProps({
  show: {
    type: Boolean,
    default: true
  }
})
const selectedCoupons = ref([])
const emit = defineEmits(['submit', 'update:show'])
onMounted(() => {})
const popup = ref<any>(null)
async function open(e:any) {
  selectedCoupons.value = e
  console.log(selectedCoupons.value)
  popup.value?.open('bottom')
  updateShow(true)
}
function close() {
  popup.value?.close()
  updateShow(false)
}

function updateShow(value: boolean) {
  emit('update:show', value)
}
defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.bgWite{background: #fff;max-height: 1000rpx;border-radius: 30rpx 30rpx 0 0;position: relative;
  padding-bottom: 30rpx;
  .colse{position: absolute;right: 30rpx;top:30rpx;}
  .title{height: 80rpx;font-size: 32rpx;}
}
.coupon{
  padding: 30rpx;
  .list{border-bottom: 1px solid #F2F3F5;padding-bottom: 10rpx;
    margin-bottom: 20rpx;
    .titles{
      font-size: 28rpx;
      margin-bottom: 30rpx;
    }
   .quanList{
      font-size: 26rpx;padding-bottom: 20rpx;
      color: #646566;
    }
  }
}
.red{
  color: #FE7431;font-size: 26rpx;font-weight: bold;
}
</style>
